
// 获取所有的nav-item元素
    var navItems = document.querySelectorAll('.nav-item');

    // 为每个nav-item元素添加点击事件监听器
    navItems.forEach(function(item) {
      item.addEventListener('click', function(event) {
        // 阻止默认的链接跳转行为
        event.preventDefault();
        
        // 移除所有nav-item和nav-link的active类
        navItems.forEach(function(navItem) {
          navItem.classList.remove('active');
          navItem.querySelector('.nav-link').classList.remove('active');
        });

        // 为当前点击的nav-item和其包含的nav-link添加active类
        item.classList.add('active');
        item.querySelector('.nav-link').classList.add('active');
      });
    });

    
    var courseList = []; // 将 courseList 声明为全局变量
    var courseInfo={};
    /* 发送axios请求，请求课程数据 */
    async function getCourse() {
      try {
        // 发送GET请求
        const res = await axios({
          url: 'http://localhost:8080/zhengshidazuoye/shuju',
          method: "get",
          params: {
            thing: 'course'
          }
        });

        courseList = res.data; // 更新全局变量

        // 确保courseList是一个数组
        if (Array.isArray(courseList)) {
          // 获取 ul 元素
          var ul = document.getElementById("courseList");

          // 清空之前的列表项（如果需要）
          ul.innerHTML = '';

          // 使用 forEach 方法遍历课程列表数组
          courseList.forEach(function(item) {
            // 创建 li 元素
            var li = document.createElement("li");
            li.className = "col-md-6 text-sm-center service-block";

            // 创建 li 元素的 HTML 内容
            li.innerHTML =
              '<h3><h2>' + item.week + '</h2>' + item.course + '</h3>' +
              '<p>时间: ' + item.starttime + '-' + item.endtime + ' | 教练: ' + item.coach + '</p>' +
              // 使用课程的 ID 调用 showReservationSuccess 函数，并添加 data-id 属性
              '<button class="btn btn-primary" onclick="showReservationSuccess(' + item.id + ')" data-id="' + item.id + '">预约课程</button>';
            // 将 li 元素追加到 ul 中
            ul.appendChild(li);
          });
        } else {
          console.error('Error fetching courses: Invalid data format');
        }
      } catch (error) {
        console.error('Error fetching courses:', error);
        console.error('Detailed error:', error.response ? error.response.data : error.message);
      }
    }

 
 // 显示预约课程的弹框
    function showReservationSuccess(courseId) {
      var modal = document.getElementById("myModal");
      modal.style.display = "block";
      
      // 获取课程信息
      courseInfo = getCourseInfoById(courseId);
      courseInfo.id = courseId; // 设置课程ID
    }



    // 根据 courseId 从课程列表中获取课程信息的函数
    function getCourseInfoById(courseId) {
      // 遍历全局的 courseList 数组，查找对应的课程信息
      for (var i = 0; i < courseList.length; i++) {
        if (courseList[i].id === courseId) {
          return courseList[i];
        }
      }
      return null; // 如果找不到对应的课程信息，返回 null
    }


// 这个函数用于关闭弹框
function closeModal() {
  var modal = document.getElementById("myModal");
  modal.style.display = "none";
}

/*预约课程*/
async function submitForm() {
	  var name = $('#name').val().trim(); // 获取姓名输入框的数值，并移除前后空格
	  var phone = $('#phone').val().trim(); // 获取电话输入框的数值，并移除前后空格
	    var id = localStorage.getItem('id'); 
	    console.log(id);
	  if (!name) {
	    alert("姓名不能为空");
	    return; // 阻止表单提交
	  }

	  if (!phone) {
	    alert("电话不能为空");
	    return; // 阻止表单提交
	  }

	  try {
	    const res = await axios({
	      method: 'post',
	      url: 'http://localhost:8080/zhengshidazuoye/yuyuekecheng', 
	      params: {
	        name: name,
	        phone: phone,
	        course: courseInfo.course,
	        week: courseInfo.week,
	        starttime: courseInfo.starttime,
	        endtime: courseInfo.endtime,
	        userId:id
	      }
	    });
	    // 提示用户预约成功
	    alert("预约成功！");
	    closeModal();
	    fetchBookings();//重新渲染个人中心的课程预约
	    

	    // 禁用对应的按钮
	    var buttons = document.querySelectorAll('button[data-id="' + courseInfo.id + '"]');
	    buttons.forEach(function(button) {
	      button.disabled = true;
	    });
	  } catch (error) {
	    console.error(error);
	    // 在实际应用中，你可以根据需要处理错误，比如显示一个错误消息给用户
	  }
	}


/* 请求器械数据 */
async function getEquipment(){
  try { 
    const res = await axios({
      url: 'http://localhost:8080/zhengshidazuoye/shuju',
      method:"get",
      params: {
        thing: 'equipment'
      }
    });
    
    var equipmentList = res.data;
    var ul = document.querySelector('ul.clearfix');
    
    if (Array.isArray(equipmentList)) {
      equipmentList.forEach(function(item) {
        var li = document.createElement('li');
        li.innerHTML = '<a>' +
          '<img src="' + item.src + '">' +
          '<h4>' + item.title + '</h4>' +
          '<div class="info">' +
          '<span class=\'shiyong\'>使用步骤:<span class="xianging">' + item.pedaling + '</span></span>' +
          '<br>' +
          '<span class=\'shiyong\'>注意事项:<span class="xianging">' + item.guidance + '</span></span>' +
          '</div>' +
          '</a>';

        ul.appendChild(li);
      });
    } else {
      console.error('Error fetching equipment: Invalid data format');
    }
  } catch (error) {
    console.error('Error fetching equipment:', error);
  }
}



/*请求商品分类*/
/* 请求商品数据的通用函数 */
async function getProducts(type, value) {
  try {
    let params = {};
    if (type === 'category') {
    	  params.category = encodeURIComponent(value);
    } else if (type === 'keyword') {
      params.keyword = encodeURIComponent(value);
      }

    const res = await axios({
    	method:"get",
    	url:'http://localhost:8080/zhengshidazuoye/category',
        params: params
      });
    // 调试输出
   /* console.log('Requesting products with params:', params);*/
    var productList = res.data;

    if (Array.isArray(productList)) {
        if (productList.length === 1) {
          // 只有一条数据
          const product = productList[0];
          /*调用高亮函数*/
          highlightProductById(product.id);
        } else if (productList.length > 1) {
          // 多条数据
          const newProductList = productList;
          renderProducts(newProductList);
        } else {
          // 没有数据
          alert('没有该商品');
        }
      } else {
        // 非数组情况的处理
        alert('获取数据格式错误');
      }
    } catch (error) {
      console.error('Error fetching products:', error);
      alert('获取数据时出错，请稍后再试');
    }
  }

//高亮显示产品的函数
function highlightProductById(productId) {
    const productElement = document.getElementById(productId);

    if (productElement) {
        // 滚动到商品位置，并考虑导航栏高度
        const elementPosition = productElement.getBoundingClientRect().top + window.scrollY;
        const offsetPosition = elementPosition -85;

        window.scrollTo({
            top: offsetPosition,
            behavior: 'smooth'
        });
     // 触发鼠标悬停样式
        productElement.classList.add('highlighted');

        
        // 可选：设置一个计时器来移除高亮类，模拟点击后短暂高亮
        setTimeout(function() {
        productElement.classList.remove('highlighted');
     }, 3000); // 2秒后移除高亮样式
    } else {
        alert('未找到指定的产品');
    }
}

/* 渲染产品列表的通用函数 */
function renderProducts(productList) {
	var fenleishuju= document.querySelector('.fenleishuju');
		    var li = document.createElement('li');
		    
		    li.id = productList[0].id;
		    li.className = 'category'; // 设置 class 为 "category"
		    li.innerHTML =
		    	'<div class="xtx_goods_category xtx_panel">' +
                '<div class="wrapper">' +
                    '<div class="xtx_panel_header">' +
                        '<p class="tuijianwupin">' + productList[0].category + '</p>' +
                    '</div>' +
                    '<div class="xtx_panel_goods_2">' +
                        '<ul class="clearfixproducts'+productList[0].id+'">' +
                            // 这里可以添加商品信息的拼接
                        '</ul>' +
                    '</div>' +
                '</div>' +
            '</div>' 
		   
            fenleishuju.appendChild(li);
		 
	
		    // 添加商品列表
		    productList.forEach(function(item, index) {
		      var clearfixproducts=document.querySelector('.clearfixproducts'+productList[0].id+'');
		      var li = document.createElement('li');
		      // 如果是第一个产品，只渲染 src
		      li.id=item.id;
		      if (index === 0) {
		        li.innerHTML =
		          '<a href="javascript:;">' +
		          '    <img src="' + item.src + '" alt="">' +
		          '</a>';
		      } else {
		        // 其他产品渲染所有字段
		        li.innerHTML =
		          '<a href="javascript:;">' +
		          '  <div class="img-box">' +
		          '    <img src="' + item.src + '" alt="">' +
		          '  </div>' +
		          '</a>' +
		          '<div class="meta">' +
		          '  <p class="name">' + item.name + '</p>' +
		          '  <p class="kouhao">' + item.kouhao + '</p>' +
		          '  <span class="price"><small>￥</small>' + item.price + '</span>' +
		          '</div>' +
		          '<div class="extra">' +
		          '  <a href="javascript:;">' +
		          '<span class="buy-btn" data-id="' + item.id + '" data-src="' + item.src + '" data-price="' + item.price + '" data-name="'+item.name+'" onclick="buyNow(event)">立即购买</span>'+
		          '    <span>加入购物车&gt;</span>' +
		          '  </a>' +
		          '</div>';
		      }
		      clearfixproducts.appendChild(li);
		    });

}



/*立即购买，商品详情页*/
 document.addEventListener("DOMContentLoaded", function() {
	    // 获取弹框元素
	    var modal = document.querySelector(".modal");
	    // 获取关闭弹框的按钮
	    var closeBtn = document.querySelector(".close");
	    // 获取打开弹框的按钮（立即购买按钮）
	    var buyBtns = document.querySelectorAll(".buy-btn");
	    // 获取数量输入框
	    var quantityInput = document.getElementById("quantity-input");
	    // 获取总价显示元素
	    var totalPriceElem = document.getElementById("calculated-total-price");
	    // 获取单价显示元素
	    var itemPriceElem = document.getElementById("item-price");
	    
	    var currentProduct = {}; // 用于存储当前商品信息的对象
	    // 点击购买按钮时显示弹框
	    window.buyNow = function (event) {
	        if (event.target.classList.contains('buy-btn')) { 
	        	   currentProduct.id = event.target.dataset.id;
	        	    currentProduct.name = event.target.dataset.name;
	        	    currentProduct.src = event.target.dataset.src;
	        	    currentProduct.price = parseFloat(event.target.dataset.price);
	          
	            modal.style.display = "block";
	            document.getElementById("modal-img").src =  currentProduct.src;
	            itemPriceElem.textContent =  currentProduct.price.toFixed(2);

	            // 设置数量输入框的初始值为1
	            quantityInput.value = 1;

	            // 更新总价
	            updateTotalPrice();
	        }
	    }


	    // 更新总价
	    function updateTotalPrice() {
	        var quantity = parseInt(quantityInput.value);
	        var price = parseFloat(itemPriceElem.textContent);
	        var totalPrice = quantity * price;
	        totalPriceElem.textContent = totalPrice.toFixed(2);
	    }

	    // 绑定立即购买按钮事件
	    buyBtns.forEach(function (btn) {
	        btn.addEventListener('click', buyNow);
	    });

	    // 点击关闭按钮时隐藏弹框
	    closeBtn.addEventListener('click', function () {
	        modal.style.display = "none";
	    });

	    // 当数量输入框的值变化时更新总价
	    quantityInput.addEventListener("input", updateTotalPrice);
	    
	    var checkoutBtn = document.getElementById("checkout-btn"); 
	 // 点击结算按钮时跳转到模拟结算页面
	    checkoutBtn.addEventListener('click', function() {
	    	  var quantity = parseInt(quantityInput.value);
	    	  var totalPrice = parseFloat(totalPriceElem.textContent);

	    	  var checkoutUrl = "checkout.jsp?id=" + currentProduct.id + "&name=" + encodeURIComponent(currentProduct.name) + "&price=" + currentProduct.price + "&quantity=" + quantity + "&totalPrice=" + totalPrice;


	    	  // 跳转到模拟结算页面
	    	  window.location.href = checkoutUrl;
	    	});
	    
	});





//获取搜索按钮和输入框
const searchButton = document.getElementById('searchButton');
const searchInput = document.getElementById('searchInput');

searchButton.addEventListener('click',function() {
	 const searchTerm = searchInput.value.trim(); // 获取输入框内容并去除首尾空格
	    getProducts('keyword', searchTerm);
	    searchInput.value = ''; // 清空输入框内容
    });

 
window.onload = function() {
    getCourse();
    getEquipment();
 // 请求饮料类商品
    getProducts('category', '饮料');
    getProducts('category', '水果');
    getProducts('category', '零食');
    fetchBookings();
};
     





//会员充值
//自定义 JavaScript 可以在这里添加
$(document).ready(function() {
  // 设置按钮点击事件
  $('.btn-outline-primary').click(function() {
    var amount = $(this).text().trim();
    $('#amount').val(amount );
  });

  // 设置支付表单提交事件
  $('#zhf').click(function(event) {
    event.preventDefault();

    //hanshu("2024623181343843","会员充值",13);
    var formData = $(this).serialize();
    // 这里可以添加发送支付请求的代码
    //alert('支付成功！');
    var balance= $('#amount').val();
    var no=balance.split(" ")
    console.log(no[0]);
    var id = localStorage.getItem('id');
    fetchBookings() ;
	async function fetchBookings() {  
		  try {  
		    const res = await axios({
		    	method:'post',
		    	url:"http://localhost:8080/zhengshidazuoye/huiyuan", 
		    	params: {
		    	balance: no[0],
                id:id
        }});  
		    // 处理成功响应  
		    const bookings = res.data; 
		    console.log(bookings);  
	
		   // chonzhi("2024623181343843","会员充值",bookings[0].balance);
//		    
		    hanshu(bookings[0].dingdanh,"会员充值",bookings[0].nihao);
		    
		  
		  } catch (error) {  
		    // 处理错误响应  
		    console.error('Failed to fetch bookings:', error);  
		  }  
		}
    
    
    
    // 如果有需要，可以重置表单
    // $(this)[0].reset();
  });
});


//点击立即支付，跳转到支付界面
function hanshu(dingdanhso,minc,shuzi,shui){
	
    $.ajax({
        url: "alipay.trade.page.pay.jsp", // 替换为你的Servlet URL
        type: 'POST',
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        data: {
        	 WIDout_trade_no: dingdanhso,
             WIDsubject: minc,
             WIDtotal_amount: shuzi,
             WIDbody: shui?shui:null
        }, // 将数据对象转换为JSON字符串
        success: function(response) {
            $("#nirong").html(response);
            //window.location.href = response.redirectUrl;
            // 可以在这里添加更多逻辑来处理成功的响应，例如重定向或显示消息
        },
        error: function(xhr, status, error) {
            console.error("AJAX request failed: " + status + ", " + error);
        }
    });
}




/*个人中心*/
//发送 Axios 请求
//封装的函数，用于获取预约课程数据并追加到列表中
async function fetchBookings() {  
	  var id = localStorage.getItem('id'); 
	  const ul = document.querySelector('.my-bookings ul.list-group');  
	  ul.innerHTML=" ";
	  try {  
	    const res = await axios.get("http://localhost:8080/zhengshidazuoye/gerenzhongxin?id="+id+"");  
	    // 处理成功响应  
	    const bookings = res.data; // 假设返回的数据是一个包含预约课程的数组  
	    console.log(bookings);  
	    // 追加到 ul 列表中  
	   
	   
	    bookings.forEach(function (booking) {  
	      const li = document.createElement('li');  
	      li.className = 'list-group-item';  
	      // 拼接除了id之外的其他信息  
	   // 使用字符串拼接  
	      var info = '课程: ' + booking.course + '-'+ booking.week + '-' + booking.starttime + '-'+booking.endtime ;  
	      li.innerText = info;  
	      
	      ul.appendChild(li);  
	    });  
	  } catch (error) {  
	    // 处理错误响应  
	    console.error('Failed to fetch bookings:', error);  
	  }  
	}

// 调用封装的函数
fetchBookings();

function getUserBalance() {  
    var id = localStorage.getItem('id');  
    if (!id) {  
        console.error("ID is not found in localStorage");  
        return; // 如果ID不存在，则不发送请求  
    }  
  
    $.ajax({  
        url: 'http://localhost:8080/zhengshidazuoye/balance',  
        type: 'GET', // GET请求  
        data: { // GET请求的参数应该放在data中，而不是params  
            id: id  
        },  
        dataType: 'json', // 假设服务器返回JSON格式的数据  
        success: function(response) {  
            if (response) { // 假设服务器返回了一个包含balance的对象  
           
                const balance = parseFloat(response.balance); // 假设balance是一个字符串，我们将其转换为浮点数  
                const sessionPrice = 50; // 假设每次健身课的价格是50元  
                const remainingSessions = Math.floor(balance / sessionPrice); // 计算剩余健身次数  
  
                // 更新页面上的剩余健身次数  
                $('#remaining-sessions-count').text(remainingSessions);  
  
          
            } else {  
                console.error("Invalid response from server or 'balance' is not found");  
            }  
        },  
        error: function(xhr, status, error) {  
            // 处理错误  
            console.error("Error: " + error);  
        }  
    });  
}
  
// 调用函数以获取余额并更新剩余健身次数  
getUserBalance();









/*在线留言*/
$(document).ready(function() {
    async function submitFeedbackHandler(event) {
        event.preventDefault();

        const name = $('#exampleName').val();
        const phone = $('#examplePhone').val();
        const email = $('#exampleInputEmail1').val();
        const serviceRating = $('#serviceRating').val();
        const coachRating = $('#coachRating').val();
        const message = $('#exampleTextarea').val();

        if (!name || !phone || !email || !message) {
            alert('请填写所有必填字段。');
            return;
        }

     

        try {
            const res = await axios({
                method: 'post',
                url: 'http://localhost:8080/zhengshidazuoye/liuyan', 
                params: {
                	   name: name,
                       phone: phone,
                       email: email,
                       serviceRating: serviceRating,
                       coachRating: coachRating,
                       message: message
                }
            });

            console.log('反馈提交成功！服务器响应：', res.data);
            alert('反馈提交成功！');

            // 重置表单
            $('#exampleName').val('');
            $('#examplePhone').val('');
            $('#exampleInputEmail1').val('');
            $('#serviceRating').val('优秀');
            $('#coachRating').val('优秀');
            $('#exampleTextarea').val('');
        } catch (error) {
            console.error('反馈提交失败：', error);
            alert('反馈提交失败，请稍后再试。');
        }
    }

    $('#submitFeedback').click(submitFeedbackHandler);
});


